묻고 답해요
129만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결iOS AutoLayout 완벽 가이드 - 실무 프로젝트를 위한 실전강의
안녕하세요. Autoshrink의 Minimum Font Size 관련 질문이 있습니다.
안녕하세요. Autoshrink Minimum Font Size 관련 질문이 있습니다.영상에서는 '공인인증서' 레이블의 폰트 크기가 30 일 때 Minimum Font Size를 15로 설정하셨는데,Mininum Font Size 비율을 보통 원래 크기의 50%로 설정하는 편인가요?물론 상황에 따라 설정값이 달라지겠지만, 혹시 일반적인 기준값이 있나 해서 질문 드립니다.감사합니다.
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
스타일 및 텍스트박스 관련 문의드립니다.
안녕하세요 에릭님! 수업을 듣다 질문이 있어 문의남깁니다.오랫만에 다시 들으며 질문이 생겨서 남기는것인데, 혹시 다른 강의에서 설명해주셨던 부분이면 죄송합니다^^;우선 첫번째로는, 아래 첨부한 이미지와 같이 텍스트를 입력하고 여백을 잴 때 텍스트박스 기준으로 사이즈를 재게 되는데, out stroke처리를 하는것과 텍스트박스 크기를 조정하는것에서 여백 차이가 발생합니다.이럴때 처음에는 텍스트 박스로 작업을 하더라도, 최종 개발자에게 넘겨주기 전에는 스트로크 처리를 한 뒤에 여백이나 정렬을 다시 정리해야 하는걸까요?두번째 질문은, 스타일 가이드를 잡을 때 보통 몇개정도의 스타일 가이드를 잡고 진행하는것이 좋을까요?예를들어서 같은 26사이즈에, bold와 26사이즈 light가 있으면 각각 스타일을 등록해놔야 하는것인지그리고 버튼에 들어가는 텍스트 스타일은 Heading이나 Body외에 Button으로 별도 스타일 네이밍을 해야하는것인지 궁금합니다. 같은 사이즈나 굵기여도, 글씨체가 달라진다면 그것도 별도 스타일로 지정해야하나요? 마지막으로 개발자에게 작업 시안을 넘길 때 현업에서 필수로 넘기는 정보가 있을까요? 예를들어 padding, margin값을 알 수 있는지 문의가 들어왔었는데, 이런것 외에도 색상코드나 텍스트 사이즈같은걸 사전에 스타일로 잡으면서 값을 다 정리해놓고 개발자분에게 전달해야하는것인지..? 궁금합니다. ^^처음에 강의를 들을땐 다 알것만 같았는데, 다시 실제 실습이나 작업을 해보며 강의를 재수강하니 까먹었던것이나 당시에 100%이해하지 못하고 넘어갔던것을 다시 학습하게 되어 좋기도 하고, 귀찮게 질문드려 죄송한 마음도 드네요.좋은 강의와 답변에 늘 감사한 마음드립니다. 감사합니다!!
-
해결됨뉴욕 프로덕트 디자이너가 알려주는, 입문자를 위한 UX디자인 개론
좋은 UX와 안좋은 UX 사례
안녕하세요! 제가 자주 사용하는 컬리와, 오늘의집 두가지 앱으로 과제 제출합니다. 이전 검색 결과에 따라 상품추천 해주던 것이 생각나 선택하게되었어요. 식품, 인테리어 각 다른 분야의 서비스지만, 두 앱 모두 맞춤형 콘텐츠를 추천하는 개인화 서비스를 제공하고 있었는데요. 이외에도 두 앱을 비교하며 여러 공통점으로 찾아 볼 수 있었습니다. 배웠던 UX입문 원리들에 따라 분류해보았습니다.1.낮은의도와 높은 의도를 가진 사용자를 고려한 콘텐츠 구성 공통적으로 검색데이터를 활용한 추천상품(이 상품 어때요?/최근관심있게본#00)과 사용자의도를 고려한 메뉴구성이 눈에 띄었는데요. 추천상품(컬리추천/취향의발견), 혜택상품(알뜰쇼핑, 특가혜택/오늘의 딜)이 공통적인 특징이라 생각했습니다.또 하나 공통적으로 컬리는 ‘컬리로그’의 요리•뷰티와 관련한 일상사진으로 오늘의 집은 ‘커뮤니티’의 집들이 소개 콘텐츠로 상품을 간접노출 하고 있습니다. 다만 오늘의 집 경우 이벤트 영역 아래 사용자가 자주 찾을 법한 메뉴를 아이콘으로 구성해 보여주어 한눈에 필요한 메뉴를 찾을 수 있다고 생각했습니다. 다음은 안좋은 UX사례로1.모바일앱과 PC웹의 다른 메뉴명 - 오늘의 집 어떤 이유가 있는 걸까요? 오늘의 집의 경우 PC웹에서 확인해보니 하위 콘텐츠는 동일한데 메뉴명이 다른 것을 발견했습니다. PC웹에서는 ‘커뮤니티’, ‘스토어’, ‘이사/시공/수리’로 최상위 메뉴구조를 앱의 경우는 커뮤니티를 ‘둘러보기’, 스토어를 ‘쇼핑’으로 보여주고 있었습니다. (사례를 찾을 당시는 스토어 였는데 글을 올리는 시점엔 쇼핑으로 변경되었네요 ?)앱 최상단에 검색바의 경우도 앱은 오늘의 집 통합검색, 쇼핑검색이고 PC는 통합검색과 스토어검색입니다. 이부분이 수업에서 배운 일관성의 원리에 어긋나는 것은 아닌지 해서 UX의 안좋은 사례로 선정하였습니다. 2.컬리의 마켓 or 뷰티 탭 전환 시 어딘가 불편한 UX 마켓컬리와 뷰티컬리의 탭전환은 네비게이션 바 가운데 토글 스위치 형태의 UI로 이루어집니다. 여기서 마켓과 뷰티의 전환 시 하단탭바의 가운데 아이콘 ‘메뉴’를 누르면 하위 메뉴들도 바뀌어있는 것을 알 수 있습니다. 두번째 메뉴인 컬리로그도 탭 전환에 따라 전체 페이지 내 요리와 뷰티 중 해당하는 콘텐츠가 상위에 노출 되는 것 같습니다. (여러번 마켓과 뷰티를 전환해봄) 최상위 메인기능 전환이 이루어지는 하단탭바에 컬리의 탭 (마켓or뷰티)을 붙이다보니 UX적으로 아쉽다고 생각했습니다. 여기서 탭바의 메뉴구조를 조금 손보면 사용자의 혼선을 줄일 순 있지않을까.. 생각해보기도 했습니다. (홈을 가운데 정렬하고 좌우로 기타 메뉴를 배치한 후 컬리탭을 홈으로 전환한다면..) 현재 앱에서 상단과 우측 하단 두 곳에 전환 탭을 중복 제공하고 있는데 어쩌면 엄지영역을 고려해 한 화면에 두곳이나 중복으로 배치한 것이 아닌지 추측해보았습니다.읽어주셔서 감사합니다.
-
미해결모바일 웹 퍼블리싱 포트폴리오 with Figma
HTML 와이어프레임 만들기 실습(커스텀 체크박스 로그인폼) 강의의 파일이 없는것 같아요
안녕하세요! 코딩웍스 선생님 강의를 열심히 듣고있는 학생입니다! :)공유해주신 폴더 모두 찾아보았는데 모바일 웹 HTML 와이어프레임 구조 , HTML 와이어프레임 실습 (로그인폼) 관련된 파일을 찾아봐도 없는데 혹시 어디에 있는지 알려주시면 감사하겠습니다!
-
미해결뉴욕 프로덕트 디자이너가 알려주는, 입문자를 위한 UX디자인 개론
UI 디자인 원리 적용된 좋은 사례, 나쁜 사례
좋은 사례뱅크샐러드뱅크 샐러드 어플을 최근 들어 다시 쓰고 있습니다. 기존 은행 어플과 달리 정말 직관적인 UI를 많이 느끼고 있는데요.그 중에서 휴리스틱 평가 상태 안내가 적용된 걸로 생각되는 예입니다. 동의 사항이 나올때 아래 버튼이 '아래로 스크롤' 통해서 제가 더 읽어야 하는 것이 있다는 것을 말해주고 끝까지 읽으면 그 버튼 내용이 바뀌면서 '내 데이터 조회하기'로 바뀌어 다 읽고 그 다음으로 진행됨을 나타내는 CTA가 반영되어 이해하기가 수월했습니다나쁜 사례KB Star Banking많은 정보의 양을 너무 작은 텍스트, 그리고 그 글이 스크롤과 더불어서 좌,우로 읽어야 할 것도 있습니다. 뭔가 읽고 싶어도 읽고 쉽지 않게 만듭니다. 진행사항도 없고 제가 하는 행동이 하나도 UI요소로 반영이 안되어 더이상 여기선 '전체 동의' 버튼 누르고 빠르게 나가고만 싶었습니다. 뭔가 사용자로 하여금 읽게끔 배려해주는 것이 전혀 없다는 것을 느꼈습니다
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
짝수/홀수 프레임 width와 object 크기 결정 문의
에릭님 안녕하세요~강의를 듣던 중에 궁금한 점이 있습니다.저희가 프로젝트에 따라 다르겠지만 보통 프레임을 선택할 때 안드로이드는 360*XXX iPhone은 375*812 사이즈로 선택하고 작업을 진행한다고 알고 있습니다.관련해서 제가 프레임 중앙에 어떤 객체 (예. 정사각형 카드)를 배치한다고 했을 때 안드로이드에서는 짝수 (240*240)의 경우 가운데 정렬을 했을 때 좌/우 60씩 남지만 아이폰에서는 67/68로 배치가 됩니다. (피그마에서 억지로 가운데 정렬을 할 수 있을 것 같긴 한데 그러면 그게 0.5단위여서 개발에 전달할 때 문제가 있지 않을까 싶기도 하고 다른 객체들을 디자인 할 때 방해가 되지 않을까 싶습니다.)위와 같은 예시로 한 앱을 두 OS에서 동일하게 보여주고 싶다면 객체 크기를 어떻게 설정하는게 좋을까요?아이폰에서도 프레임의 짝수 홀수의 width가 섞여 있는데 정사각형/원형이 개체를 정 가운데 배치할 때 어떻게 기준을 잡아야 할까요?더불어 안드에서는 8의 배수로 디자인 하는 것을 많이 권장하시는데 아이폰에서도 그런 기준이 있을까요? 미리 감사합니다~
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
그리드 숨기기
그리드 숨기기 단축키를 누르면 (컨트롤+g) 누구면 그룹화되고 그리드는 안없어지네요ㅜㅜ
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
피그마에서 큰 이미지 불러올 시 사이즈 자동 리사이징 현상
로고나 아이콘, 썸네일 등에 사용 할 작은 이미지들은 문제가 없는데 whith 1000px 이상 넘어가는 이미지 불러올 시 원본 사이즈보다 작게 리사이징 되는데, 왜 그런건지 이유를 알 수 있을까요? 예를 들어 웹사이트를 통으로 캡쳐 후(1920px X @) 피그마로 불러오면 원본 사이즈는 1920px보다 작게 출력이 됩니다. 늘리면 당연히 깨지겠지요.. 포토샵에서는 원본 그대로 불러오기 됩니다. 답변 부탁 드립니다!
-
미해결iOS AutoLayout 완벽 가이드 - 실무 프로젝트를 위한 실전강의
질문있습니다
강의처럼 버튼 attributes inspector에서 image에 사진을 넣고 제약조건을 넣어도 버튼의 크기는 작아지지만 이미지의 크기는 그대로 계속 고정 됩니다. 계속 만져보다가 background image에 넣을 때는 제약조건에 따른 버튼의 크기에 맞게 이미지가 작아지는데 image 와 background image의 차이가 뭔지 궁금합니다